/**
 * 生命周期
 */
import React, { createRef } from 'react'
import { Button } from 'antd'

class LifeCycle extends React.Component {
  // 有State而无DOM,说明同created，而非beforeCreate
  constructor() {
    super()
    console.log(this.refDom.current) // 此处为null，说明还为挂载DOM
    console.log(this.state.count) // 0,已经挂载State数据
    console.log('constructor')
  }
  // 同mounted，可发送请求等等
  componentDidMount () {
    console.log(this.refDom.current) // 此处为<button>0</button>
    console.log('componentDidMount')
  }
  // 每次state数据更新都会调用，在render之后都会调用
  componentDidUpdate () {
    console.log('componentDidUpdate')
  }
  // 每次组件卸载时调用，同destroyed
  componentWillUnmount () {
    console.log('componentWillUnmount')
  }
  refDom = createRef()

  state = {
    count: 0
  }
  addCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  // 每次setState后都会重新render
  render () {
    // this.setState()不应该在render中调用，造成死循环
    console.log('render')
    return (
      <div>
        生命周期组件
        <Button type="primary">点击</Button>
        <button ref={this.refDom} onClick={this.addCount}>{this.state.count}</button>
      </div>
    )
  }
}

export default LifeCycle